File Path, Boilerplate, Div, Class & ID

1. File Paths in HTML

File paths tell the browser where to find images, videos, or other files. There are two types:

Relative Path

Shows the location of a file relative to the current HTML file. Most commonly used in websites.

/webdev-course/
   ├── index.html
   ├── lecture4.html
   ├── images/
   │      └── picture.jpg

Example:

<img src="images/picture.jpg" alt="Sample">

Absolute Path

Shows the complete location of a file either on the computer or on the internet.

Local Absolute Path:

<img src="C:/Users/Payal/Desktop/webdev-course/images/picture.jpg" alt="Sample">

Web Absolute Path:

<img src="https://example.com/images/picture.jpg" alt="Sample">

2. Boilerplate Code in HTML

Boilerplate means the basic structure of every HTML document. It includes doctype, html, head, title, and body tags.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

3. The <div> Tag

The <div> tag is a container used to group other HTML elements together. It does not show anything special by default, but it helps in dividing the page into sections.

<div>
    <h2>This is inside a div</h2>
    <p>Div is like a box for content.</p>
</div>

4. Class and ID in HTML

- class: Used to group multiple elements with the same style/behavior. - id: Unique identifier for a single element (only one element should have a given id).

Example of Class:

<div class="section">This is section 1</div>
<div class="section">This is section 2</div>

Example of ID:

<div id="header">This is the header section</div>

In CSS or JavaScript (later topics), we select class using .classname and ID using #idname.

5. Three Parts of a Webpage

Every webpage is divided into three main parts:

Header → Top section (site title, logo, navigation menu)
Main Content → Middle section (all text, images, information)
Footer → Bottom section (copyright, contact info, links)

Example Layout:

<div id="header">
   <h1>My Website</h1>
</div>

<div id="content">
   <p>This is the main content area.</p>
</div>

<div id="footer">
   <p>Copyright © 2025</p>
</div>

🏠 Homepage | ⬅ Previous Lecture | ➡ Next Lecture